<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="85px">
			<el-form-item label="密集架编号" prop="shelvesCode">
				<el-input v-model="queryParams.shelvesCode" placeholder="请输入密集架编号" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="密集架名称" prop="shelvesName">
				<el-input v-model="queryParams.shelvesName" placeholder="请输入密集架名称" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="所属库房" prop="storehouseId">
				<el-tree-select v-model="queryParams.storehouseId" :data="storehouseOptions"
					:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择库房名称"
					clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="Plus" @click="handleAdd"
					v-hasPermi="['deposit:shelves:add']">新增</el-button>
			</el-col>
			<!-- <el-col :span="1.5">
				<el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
			</el-col> -->
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-if="refreshTable" v-loading="loading" :data="shelvesList" row-key="shelvesId"
			:default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
			<el-table-column label="密集架编号" align="center" prop="shelvesCode" />
			<el-table-column label="密集架名称" align="center" prop="shelvesName" />
			<el-table-column label="所属库房" align="center" prop="storehouse.storehouseName" />
			<el-table-column label="密集架IP" align="center" prop="shelvesIp" />
			<el-table-column label="密集架端口" align="center" prop="shelvesPort" />
			<el-table-column label="列数" align="center" prop="columnNum" />
			<el-table-column label="节数" align="center" prop="sectionNum" />
			<el-table-column label="层数" align="center" prop="layerNum" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="370px">
				<template #default="scope">
					<el-button type="text" icon="Edit" @click="handleSet(scope.row)"
						v-hasPermi="['deposit:shelves:set']">设置规格</el-button>
					<el-button type="text" icon="Edit" @click="handleShow(scope.row)"
						v-hasPermi="['deposit:shelves:showInfo']">查看密集架详情</el-button>
					<el-button type="text" icon="Edit" @click="handleUpdate(scope.row)"
						v-hasPermi="['deposit:shelves:edit']">修改</el-button>
					<el-button type="text" icon="Delete" @click="handleDelete(scope.row)"
						v-hasPermi="['deposit:shelves:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加或修改密集架对话框 -->
		<el-dialog :title="title" v-model="open" width="500px" append-to-body>
			<el-form ref="shelvesRef" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="密集架编号" prop="shelvesCode">
					<el-input v-model="form.shelvesCode" placeholder="自动生成" disabled />
				</el-form-item>
				<el-form-item label="所属库房" prop="storehouseId">
					<el-tree-select v-model="form.storehouseId" :data="storehouseOptions"
						:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择库房名称"
						check-strictly />
				</el-form-item>
				<el-form-item label="密集架名称" prop="shelvesName">
					<el-input v-model="form.shelvesName" placeholder="请输入密集架名称" />
				</el-form-item>
				<el-form-item label="密集架IP" prop="shelvesIp">
					<el-input v-model="form.shelvesIp" placeholder="请输入密集架IP" />
				</el-form-item>
				<el-form-item label="密集架端口" prop="shelvesPort">
					<el-input v-model="form.shelvesPort" placeholder="请输入密集架端口" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 设置密集架规格对话框 -->
		<el-dialog :title="titleSet" v-model="openSet" width="500px" append-to-body>
			<el-form ref="shelvesRefSet" :model="formSet" :rules="rulesSet" label-width="85px">
				<el-form-item label="密集架名称" prop="shelvesName">
					<el-input v-model="formSet.shelvesName" placeholder="请输入密集架名称" disabled />
				</el-form-item>
				<el-form-item label="列数" prop="columnNum">
					<el-input v-model="formSet.columnNum" placeholder="请输入列数" />
				</el-form-item>
				<el-form-item label="节数" prop="sectionNum">
					<el-input v-model="formSet.sectionNum" placeholder="请输入节数" />
				</el-form-item>
				<el-form-item label="层数" prop="layerNum">
					<el-input v-model="formSet.layerNum" placeholder="请输入层数" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitFormSet">确 定</el-button>
					<el-button @click="cancelSet">取 消</el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 查看详情对话框 -->
		<el-dialog :title="titleDetails" v-model="openShow" width="500px" append-to-body>
			<div class="head-container">
				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="info" size="small" plain icon="Sort" @click="detailsExpandAll">展开/折叠</el-button>
					</el-col>
				</el-row>
				<el-tree :data="shelvesOptions" :props="{ label: 'label', children: 'children' }"
					:expand-on-click-node="true" highlight-current :default-expand-all="detailsIsExpandAll" accordion
					v-if="showDetails" />
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="cancelShow">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="Shelves">
import {
	listShelves,
	getShelves,
	delShelves,
	addShelves,
	updateShelves,
	updateColumnAndSection,
	treeselectShelves
} from "@/api/deposit/shelves";
import {
	treeselectHouse
} from "@/api/deposit/storehouse";
import { nextTick, ref } from "vue";
import { ElMessage, ElLoading } from 'element-plus';

const {
	proxy
} = getCurrentInstance();

const shelvesList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const title = ref("");
const isExpandAll = ref(true);
const refreshTable = ref(true);
const storehouseOptions = ref(undefined);
const shelvesOptions = ref(undefined);
const openSet = ref(false);
const titleSet = ref("");
const titleDetails = ref("");
const openShow = ref(false);
const detailsIsExpandAll = ref(false);
const showDetails = ref(true);
const maskLoding = ref(false)

const data = reactive({
	form: {},
	formSet: {},
	queryParams: {
		parentId: null,
		shelvesCode: null,
		shelvesName: null,
		shelvesPort: null,
		shelvesIp: null,
		storehouseId: null,
		leve: 0,
		columnNum: null,
		sectionNum: null,
		layerNum: null,
		status: null,
		delflag: null,
		zshelvesId: null,
		optPort: null,
		rfidcode: null
	},
	rules: {
		storehouseId: [{
			required: true,
			message: '所属库房不能为空',
			trigger: 'change'
		}],
		shelvesName: [{
			required: true,
			message: '密集架名称不能为空',
			trigger: 'blur'
		}]
	},
	rulesSet: {
		columnNum: [{
			required: true,
			message: '列数不能为空',
			trigger: 'blur'
		}],
		sectionNum: [{
			required: true,
			message: '节数不能为空',
			trigger: 'blur'
		}],
		layerNum: [{
			required: true,
			message: '层数不能为空',
			trigger: 'blur'
		}],
	},
});

const {
	queryParams,
	form,
	rules,
	formSet,
	rulesSet
} = toRefs(data);

/** 查询密集架列表 */
function getList() {
	loading.value = true;
	listShelves(queryParams.value).then(response => {
		shelvesList.value = proxy.handleTree(response.data, "shelvesId", "parentId");
		loading.value = false;
	});
}
/** 查询密集架下拉树结构 */
function getTreeselectShelves() {
	treeselectShelves(queryParams.value).then(response => {
		shelvesOptions.value = response.data;
	});
};


// /** 查询密集架下拉树结构 */
// function getTreeselect() {
// 	listShelves().then(response => {
// 		shelvesOptions.value = [];
// 		const data = {
// 			shelvesId: 0,
// 			shelvesName: '顶级节点',
// 			children: []
// 		};
// 		data.children = proxy.handleTree(response.data, "shelvesId", "parentId");
// 		shelvesOptions.value.push(data);
// 	});
// }

/** 查询库房下拉树结构 */
function getTreeselectStorehouse() {
	treeselectHouse().then(response => {
		storehouseOptions.value = response.data;
	});
};


/** 初始化库房数据 */
function initTreeData() {
	// 判断库房的数据是否存在，存在不获取，不存在则获取
	if (storehouseOptions.value === undefined) {
		treeselectHouse().then(response => {
			storehouseOptions.value = response.data;
		});
	}
};

// 取消按钮
function cancel() {
	open.value = false;
	reset();
}

// 取消按钮
function cancelSet() {
	openSet.value = false;
	reset();
}

// 取消按钮
function cancelShow() {
	openShow.value = false;
}

// 表单重置
function reset() {
	form.value = {
		shelvesId: null,
		parentId: null,
		shelvesCode: null,
		shelvesName: null,
		shelvesPort: null,
		shelvesIp: null,
		storehouseId: null,
		leve: null,
		columnNum: null,
		sectionNum: null,
		layerNum: null,
		status: 0,
		delflag: null,
		zshelvesId: null,
		optPort: null,
		rfidcode: null
	};
	proxy.resetForm("shelvesRef");
}

/** 搜索按钮操作 */
function handleQuery() {
	getList();
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm("queryRef");
	handleQuery();
}

/** 新增按钮操作 */
function handleAdd(row) {
	reset();
	//getTreeselect();
	if (row != null && row.shelvesId) {
		form.value.parentId = row.shelvesId;
	} else {
		form.value.parentId = 0;
	}
	open.value = true;
	title.value = "添加密集架";
}

// /** 展开/折叠操作 */
// function toggleExpandAll() {
// 	refreshTable.value = false;
// 	isExpandAll.value = !isExpandAll.value;
// 	nextTick(() => {
// 		refreshTable.value = true;
// 	});
// }

/** 详情展开/折叠操作 */
function detailsExpandAll() {
	if (shelvesOptions.value == "") {
		ElMessage.error('没有可供展开/折叠的结构')
	} else {
		showDetails.value = false;
		detailsIsExpandAll.value = !detailsIsExpandAll.value;
		nextTick(() => {
			showDetails.value = true
		})
	}
}

/** 修改按钮操作 */
function handleUpdate(row) {
	reset();
	//await getTreeselect();
	if (row != null) {
		form.value.parentId = row.shelvesId;
	}
	getShelves(row.shelvesId).then(response => {
		form.value = response.data;
		open.value = true;
		title.value = "修改密集架";
	});
}

/** 设置规格按钮操作 */
function handleSet(row) {
	reset();
	const shelvesId = row.shelvesId || ids.value
	getShelves(shelvesId).then(response => {
		formSet.value = response.data;
		openSet.value = true;
		titleSet.value = "设置密集架规格";
	});
}

/** 查看详情 */
function handleShow(row) {
	const shelvesId = row.shelvesId || ids.value
	treeselectShelves(shelvesId).then(response => {
		shelvesOptions.value = response.data;
		openShow.value = true;
		titleDetails.value = "查看密集架详情"
	});
}
/** 提交按钮 */
function submitForm() {
	proxy.$refs["shelvesRef"].validate(valid => {
		if (valid) {
			if (form.value.shelvesId != null) {
				updateShelves(form.value).then(response => {
					proxy.$modal.msgSuccess("修改成功");
					open.value = false;
					getList();
				});
			} else {
				addShelves(form.value).then(response => {
					proxy.$modal.msgSuccess("新增成功");
					open.value = false;
					getList();
				});
			}
		}
	});
}

/** 设置规格提交按钮 */
function submitFormSet() {
	proxy.$refs["shelvesRefSet"].validate(valid => {
		if (valid) {
			const loading = ElLoading.service({
				lock: true,
				text: 'loading',
				background: 'rgba(0, 0, 0, .7)'
			})
			updateColumnAndSection(formSet.value).then(response => {
				if (response.code == 200) {
					proxy.$modal.msgSuccess("设置成功");
					openSet.value = false;
					loading.close()
					getList();
				} else {
					proxy.$modal.error("设置失败");
					openSet.value = false;
					loading.close()
					getList();
				}
			}).catch(() => {
				loading.close()
			});
		}
	});
}
/** 删除按钮操作 */
function handleDelete(row) {
	proxy.$modal.confirm('是否确认删除密集架编号为"' + row.shelvesId + '"的数据项？').then(function () {
		return delShelves(row.shelvesId);
	}).then(() => {
		getList();
		proxy.$modal.msgSuccess("删除成功");
	}).catch(() => { });
}
getTreeselectStorehouse();
getList();
</script>
